<template>
   <div class="detail">
      <!-- 顶部导航 -->
      <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="$router.back()">
         <template #right>
            <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end" @select="selectHandler">
               <template #reference>
                  <van-icon name="ellipsis" size="30" />
               </template>
            </van-popover>

         </template>
      </van-nav-bar>

      <!-- 商品详情 -->
      <div class="content">
         <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
               <van-swipe-item v-for="(item, index) of swipeArr" :key="index" @click="swipeItemClick(index)">
                  <img :src="item" alt="">
               </van-swipe-item>
            </van-swipe>
            <div class="btn-play" @click="playHandler">
               <van-icon name="play-circle"></van-icon>
               <span class="time"> 00'55''</span>
            </div>
         </div>
         <h3 class="price">
            ¥ <span class="price-value">{{ price }}</span>
         </h3>
         <h3 class="detail-name">
            <van-tag type='danger'>自营</van-tag>
            <span class="name">{{ proname }}</span>
         </h3>
      </div>
   </div>

   <!-- 视频弹出层 -->
   <van-popup v-model:show="show" @close="closeHandler">
      <video
         src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"
         preload="preload" controls width="150" ref="video"></video>
   </van-popup>

   <!-- 加入购物车按钮和立即购买 -->
   <van-action-bar>
      <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
      <van-action-bar-button type="warning" v-if='issale' text="加入购物车" @click="addHandler" />
      <van-action-bar-button type="danger" v-if='issale' text="立即购买" />
      <van-action-bar-button type="danger" v-else text="已下架" />
   </van-action-bar>
   
   <!-- 分享面板 -->
   <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
</template>

<script setup lang='ts'>
import {ref, nextTick , onMounted} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/store/userStore'
import { add, detail } from '@/apis/cart'
import { ImagePreview } from 'vant';
const user = useUserStore()
const router = useRouter()
const route = useRoute()

const showPopover = ref(false)
const actions = [
   { text: '首页', icon: 'wap-home-o', path: '/' },
   { text: '购物车', icon: 'shopping-cart-o', path: '/cart' },
   { text: '分享', icon: 'share-o', path: 'share' },
]
//选择选项时实行的函数
const selectHandler = (option: any) => {
   if (option.path.startsWith('/')) {
      //如果path内容带/
      router.push(option.path)
   } else {
      //s显示分享面板
      showShare.value = true
   }
}
const showShare = ref(false)
const options = [
   { name: '微信', icon: 'wechat' },
   { name: '微博', icon: 'weibo' },
   { name: '复制链接', icon: 'link' },
   { name: '分享海报', icon: 'poster' },
   { name: '二维码', icon: 'qrcode' },
];
// 分享面板某个选项被点击
const onSelect = (info: any) => {
   console.log(info)
   showShare.value = false;
}

//获取商品详情数据
// 商品大图
const bannerImg = ref('')
// 商品名
const proname = ref('')
// 商品原价
const price = ref('')
// 轮播图列表
const swipeArr = ref([])
// 商品是否在售
const issale = ref(true)
onMounted(() => {
   detail(route.params.id as string)
      .then(res => {
         if ((res as any).code == 200) {
            proname.value = res.data.proname;
            issale.value = res.data.issale;
            swipeArr.value = [res.data.img1, res.data.img2, res.data.img3, res.data.img4]
            bannerImg.value = res.data.banners[0].split(',')[0]
            price.value = res.data.originprice;
         }
      })
})

// 点击轮播图的图片，弹出图片预览
const swipeItemClick = (index: number) => {
   ImagePreview({
      images: swipeArr.value,
      startPosition: index,
      closeable: true
   });
}

//视频层是否显示
const show = ref(false)
//视频节点
const video = ref<HTMLVideoElement | null>(null)
//点击视频播放按钮，中间弹出视频播放
const playHandler = () => {
   show.value = true;
   // 操作video节点
   nextTick(() => {
      // console.log(video.value)
      video.value.play()
   })
}
// 关闭视频弹出层，触发的函数
const closeHandler = () => {
   // 视频暂停播放
   video.value.pause()
   // 下次播放从0秒开始
   video.value.currentTime = 0;
}

//点击加入购物车
const addHandler = () => {
   add(user.userid,route.params.id,1)
}


</script>

<style scoped lang='scss'>
.detail {
   .content {
      height: calc(100vh - 100px);
      overflow: auto;

      &::-webkit-scrollbar {
         display: none;
      }
   }

   .van-swipe-item {
      img {
         width: 100%;
      }
   }

   .banner {
      position: relative;

      .btn-play {
         background: #fff;
         position: absolute;
         left: 50%;
         bottom: 5%;
         transform: translate(-50%, -50%);
         font-weight: bold;
         font-size: 30px;
         text-align: left;
         box-sizing: border-box;
         padding: 0 8px 0 2px;
         width: 85px;
         height: 32px;
         border-radius: 16px;
         display: flex;
         justify-content: space-between;
         cursor: pointer;
         opacity: 0.95;

         .van-icon {
            color: #ee0a24;
            margin: 2px;
         }

         .time {
            font-size: 12px;
            color: #262626;
            line-height: 30px;
         }
      }

      video {
         width: 100%;
      }
   }

   .price {
      text-align: left;
      font-weight: bold;
      font-size: 15px;
      color: #ee0a24;
      padding-left: 15px;
      margin: 5px;

      .price-value {
         font-size: 20px;
      }
   }

   .detail-name {
      text-align: left;
      padding: 0 15px;
      margin: 5px;

      .van-tag {
         margin-right: 3%;
         transform: translateY(-20%);
      }
   }
}
</style>
